var foreignData = null;
var chinaData = null;

$.when($.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
    dataType: "jsonp",
    success: function (data) {
        foreignData = JSON.parse(data.data);
        console.log(foreignData);
    }
}), $.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
    dataType: "jsonp",
    success: function (data) {
        chinaData = JSON.parse(data.data);
        console.log(chinaData);
    }
})).then(function () {
    // 标题
    title();
    // 海外疫情总览
    brief();
    // 世界疫情地图
    map();
    // 海外疫情趋势
    tendency();
    // 昨日新增确诊国家Top10
    top10();
    // 海外多国新增确诊趋势
    importantNation();
});
// 标题
function title() {
    $(".brief .brief_header p").text("更新时间 - " + foreignData.globalStatis.lastUpdateTime)
}
// 海外疫情总览
function brief() {
    var globalStatis = foreignData.globalStatis;
    var htmlStr = `
                <li class="allConfirm">
                    <div class="number">${globalStatis.confirm}</div>
                    <div class="item">累计确诊</div>
                    <div class="change"><span>昨日</span><b>${globalStatis.confirmAdd > 0 ? "+" + globalStatis.confirmAdd : "-" + globalStatis.confirmAdd}</b></div>
                </li>
                <li class="nowConfirm">
                    <div class="number">${globalStatis.nowConfirm}</div>
                    <div class="item">现有确诊</div>
                    <div class="change"><span>昨日</span><b>${globalStatis.nowConfirmAdd > 0 ? "+" + globalStatis.nowConfirmAdd : "-" + globalStatis.nowConfirmAdd}</b></div>
                </li>
                <li class="deadNum">
                    <div class="number">${globalStatis.dead}</div>
                    <div class="item">死亡人数</div>
                    <div class="change"><span>昨日</span><b>${globalStatis.deadAdd > 0 ? "+" + globalStatis.deadAdd : "-" + globalStatis.deadAdd}</b></div>
                </li>
                <li class="cureNum">
                    <div class="number">${globalStatis.heal}</div>
                    <div class="item">治愈人数</div>
                    <div class="czhange"><span>昨日</span><b>${globalStatis.healAdd > 0 ? "+" + globalStatis.healAdd : "-" + globalStatis.healAdd}</b></div>
                </li>`
    $(".brief .brief_body").html(htmlStr);
}
// 海外疫情世界地图
function map() {
    var nameMap = {
        "Canada": "加拿大",
        "Turkmenistan": "土库曼斯坦",
        "Saint Helena": "圣赫勒拿",
        "Lao PDR": "老挝",
        "Lithuania": "立陶宛",
        "Cambodia": "柬埔寨",
        "Ethiopia": "埃塞俄比亚",
        "Faeroe Is.": "法罗群岛",
        "Swaziland": "斯威士兰",
        "Palestine": "巴勒斯坦",
        "Belize": "伯利兹",
        "Argentina": "阿根廷",
        "Bolivia": "玻利维亚",
        "Cameroon": "喀麦隆",
        "Burkina Faso": "布基纳法索",
        "Aland": "奥兰群岛",
        "Bahrain": "巴林",
        "Saudi Arabia": "沙特阿拉伯",
        "Fr. Polynesia": "法属波利尼西亚",
        "Cape Verde": "佛得角",
        "W. Sahara": "西撒哈拉",
        "Slovenia": "斯洛文尼亚",
        "Guatemala": "危地马拉",
        "Guinea": "几内亚",
        "Dem. Rep. Congo": "刚果（金）",
        "Germany": "德国",
        "Spain": "西班牙",
        "Liberia": "利比里亚",
        "Netherlands": "荷兰",
        "Jamaica": "牙买加",
        "Solomon Is.": "所罗门群岛",
        "Oman": "阿曼",
        "Tanzania": "坦桑尼亚",
        "Costa Rica": "哥斯达黎加",
        "Isle of Man": "曼岛",
        "Gabon": "加蓬",
        "Niue": "纽埃",
        "Bahamas": "巴哈马",
        "New Zealand": "新西兰",
        "Yemen": "也门",
        "Jersey": "泽西岛",
        "Pakistan": "巴基斯坦",
        "Albania": "阿尔巴尼亚",
        "Samoa": "萨摩亚",
        "Czech Rep.": "捷克",
        "United Arab Emirates": "阿拉伯联合酋长国",
        "Guam": "关岛",
        "India": "印度",
        "Azerbaijan": "阿塞拜疆",
        "N. Mariana Is.": "北马里亚纳群岛",
        "Lesotho": "莱索托",
        "Kenya": "肯尼亚",
        "Belarus": "白俄罗斯",
        "Tajikistan": "塔吉克斯坦",
        "Turkey": "土耳其",
        "Afghanistan": "阿富汗",
        "Bangladesh": "孟加拉国",
        "Mauritania": "毛里塔尼亚",
        "Dem. Rep. Korea": "朝鲜",
        "Saint Lucia": "圣卢西亚",
        "Br. Indian Ocean Ter.": "英属印度洋领地",
        "Mongolia": "蒙古",
        "France": "法国",
        "Cura?ao": "库拉索岛",
        "S. Sudan": "南苏丹",
        "Rwanda": "卢旺达",
        "Slovakia": "斯洛伐克",
        "Somalia": "索马里",
        "Peru": "秘鲁",
        "Vanuatu": "瓦努阿图",
        "Norway": "挪威",
        "Malawi": "马拉维",
        "Benin": "贝宁",
        "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
        "Korea": "韩国",
        "Singapore": "新加坡",
        "Montenegro": "黑山共和国",
        "Cayman Is.": "开曼群岛",
        "Togo": "多哥",
        "China": "中国",
        "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
        "Armenia": "亚美尼亚",
        "Falkland Is.": "马尔维纳斯群岛（福克兰）",
        "Ukraine": "乌克兰",
        "Ghana": "加纳",
        "Tonga": "汤加",
        "Finland": "芬兰",
        "Libya": "利比亚",
        "Dominican Rep.": "多米尼加",
        "Indonesia": "印度尼西亚",
        "Mauritius": "毛里求斯",
        "Eq. Guinea": "赤道几内亚",
        "Sweden": "瑞典",
        "Vietnam": "越南",
        "Mali": "马里",
        "Russia": "俄罗斯",
        "Bulgaria": "保加利亚",
        "United States": "美国",
        "Romania": "罗马尼亚",
        "Angola": "安哥拉",
        "Chad": "乍得",
        "South Africa": "南非",
        "Fiji": "斐济",
        "Liechtenstein": "列支敦士登",
        "Malaysia": "马来西亚",
        "Austria": "奥地利",
        "Mozambique": "莫桑比克",
        "Uganda": "乌干达",
        "Japan": "日本",
        "Niger": "尼日尔",
        "Brazil": "巴西",
        "Kuwait": "科威特",
        "Panama": "巴拿马",
        "Guyana": "圭亚那",
        "Madagascar": "马达加斯加",
        "Luxembourg": "卢森堡",
        "American Samoa": "美属萨摩亚",
        "Andorra": "安道尔",
        "Ireland": "爱尔兰",
        "Italy": "意大利",
        "Nigeria": "尼日利亚",
        "Turks and Caicos Is.": "特克斯和凯科斯群岛",
        "Ecuador": "厄瓜多尔",
        "U.S. Virgin Is.": "美属维尔京群岛",
        "Brunei": "文莱",
        "Australia": "澳大利亚",
        "Iran": "伊朗",
        "Algeria": "阿尔及利亚",
        "El Salvador": "萨尔瓦多",
        "C?te d'Ivoire": "科特迪瓦",
        "Chile": "智利",
        "Puerto Rico": "波多黎各",
        "Belgium": "比利时",
        "Thailand": "泰国",
        "Haiti": "海地",
        "Iraq": "伊拉克",
        "S?o Tomé and Principe": "圣多美和普林西比",
        "Sierra Leone": "塞拉利昂",
        "Georgia": "格鲁吉亚",
        "Denmark": "丹麦",
        "Philippines": "菲律宾",
        "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛",
        "Moldova": "摩尔多瓦",
        "Morocco": "摩洛哥",
        "Namibia": "纳米比亚",
        "Malta": "马耳他",
        "Guinea-Bissau": "几内亚比绍",
        "Kiribati": "基里巴斯",
        "Switzerland": "瑞士",
        "Grenada": "格林纳达",
        "Seychelles": "塞舌尔",
        "Portugal": "葡萄牙",
        "Estonia": "爱沙尼亚",
        "Uruguay": "乌拉圭",
        "Antigua and Barb.": "安提瓜和巴布达",
        "Lebanon": "黎巴嫩",
        "Uzbekistan": "乌兹别克斯坦",
        "Tunisia": "突尼斯",
        "Djibouti": "吉布提",
        "Greenland": "格陵兰",
        "Timor-Leste": "东帝汶",
        "Dominica": "多米尼克",
        "Colombia": "哥伦比亚",
        "Burundi": "布隆迪",
        "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
        "Cyprus": "塞浦路斯",
        "Barbados": "巴巴多斯",
        "Qatar": "卡塔尔",
        "Palau": "帕劳",
        "Bhutan": "不丹",
        "Sudan": "苏丹",
        "Nepal": "尼泊尔",
        "Micronesia": "密克罗尼西亚",
        "Bermuda": "百慕大",
        "Suriname": "苏里南",
        "Venezuela": "委内瑞拉",
        "Israel": "以色列",
        "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛",
        "Central African Rep.": "中非",
        "Iceland": "冰岛",
        "Zambia": "赞比亚",
        "Senegal": "塞内加尔",
        "Papua New Guinea": "巴布亚新几内亚",
        "Trinidad and Tobago": "特立尼达和多巴哥",
        "Zimbabwe": "津巴布韦",
        "Jordan": "约旦",
        "Gambia": "冈比亚",
        "Kazakhstan": "哈萨克斯坦",
        "Poland": "波兰",
        "Eritrea": "厄立特里亚",
        "Kyrgyzstan": "吉尔吉斯斯坦",
        "Montserrat": "蒙特塞拉特",
        "New Caledonia": "新喀里多尼亚",
        "Macedonia": "马其顿",
        "Paraguay": "巴拉圭",
        "Latvia": "拉脱维亚",
        "Hungary": "匈牙利",
        "Syria": "叙利亚",
        "Honduras": "洪都拉斯",
        "Myanmar": "缅甸",
        "Mexico": "墨西哥",
        "Egypt": "埃及",
        "Nicaragua": "尼加拉瓜",
        "Cuba": "古巴",
        "Serbia": "塞尔维亚",
        "Comoros": "科摩罗",
        "United Kingdom": "英国",
        "Fr. S. Antarctic Lands": "南极洲",
        "Congo": "刚果（布）",
        "Greece": "希腊",
        "Sri Lanka": "斯里兰卡",
        "Croatia": "克罗地亚",
        "Botswana": "博茨瓦纳",
        "Siachen Glacier": "锡亚琴冰川地区"
    };
    var myChart = echarts.init(document.querySelector(".brief .map_info"));

    var virusDatas = [];
    $.each(foreignData.foreignList, function (i, v) {
        virusDatas[i] = {};
        virusDatas[i].name = v.name;
        virusDatas[i].value = v.confirm;
    })
    virusDatas.push({
        name: "中国",
        value: chinaData.chinaTotal.confirm
    });
    console.log(virusDatas);


    var option = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + " : " + (params.value ? params.value : "未公布")
            }
        },
        visualMap: {
            type: 'piecewise',
            pieces: [
                { max: 0, label: '0', color: '#fff' },
                { min: 1, max: 499, label: '1-499', color: '#fff7ba' },
                { min: 500, max: 4999, label: '500-4999', color: '#ffc24b' },
                { min: 5000, max: 9999, label: '5000-9999', color: '#ff7c20' },
                { min: 10000, max: 100000, label: '1万-10万', color: '#fe5e3b' },
                { min: 100000, max: 500000, label: '10万-50万', color: '#e2482b' },
                { min: 500000, label: '50万以上', color: '#b93e26' },
            ],
            itemHeight: 10,
            itemWidth: 10,
            itemSymbol: "arrow",
            inverse: true
        },
        series: [{
            name: '',
            type: 'map',
            mapType: 'world',
            data: virusDatas,
            nameMap: nameMap,
            top: "center",
            left: "center",
            scaleLimit: {
                min: 1,
                max: 10
            },
            layoutCenter: ['center', 'center'],
            layoutSize: "180%",
            itemStyle: {
                emphasis: {
                    areaColor: '#c9ffff',
                    label: {
                        show: false
                    }
                }
            }
        }]
    };

    myChart.setOption(option);
    $(".brief .map_tab span").eq(0).click(function () { fn("confirm") });
    $(".brief .map_tab span").eq(1).click(function () { fn("nowConfirm") });
    function fn(valueName) {
        var virusDatas = [];
        $.each(foreignData.foreignList, function (i, v) {
            virusDatas[i] = {};
            virusDatas[i].name = v.name;
            virusDatas[i].value = v[valueName];
        })
        virusDatas.push({
            name: "中国",
            value: chinaData.chinaTotal[valueName]
        });
        option.series[0].data = virusDatas;
        myChart.setOption(option);
    }
    $(".map_tab span").click(function () {
        $(this).addClass("cur").siblings().removeClass("cur");
    })
};
// 海外疫情趋势
function tendency() {
    var myChart = echarts.init(document.querySelector(".tendency .map_info"));
    var globalDailyHistory = foreignData.globalDailyHistory;
    var num = [], date = [];
    globalDailyHistory.reverse();
    globalDailyHistory.shift()

    $.each(globalDailyHistory, function (i, v) {
        if (num.length < 27 && i % 3 == 0) {
            num.push(v.all.newAddConfirm);
            date.push(v.date);
        }
    })

    var option = {
        title: {
            text: "海外新增确诊趋势",
            textStyle: {
                fontSize: 14
            },
            top: 20
        },
        legend: {
            show: true,
            verticalAlign: "middle",
            icon: "rect",
            itemWidth: 12,
            itemHeight: 12,
            right: 20,
            top: 20,
            orient: 'horizontal'
        },
        grid: {
            borderColor: "#ccc"
        },
        xAxis: {
            length: 7,
            type: 'category',
            data: date.reverse(),
            axisTick: {
                length: 0,
                rotate: 45
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                color: "#ccc",
                fontSize: 10
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 120000,
            axisLine: {
                show: false
            },
            axisTick: {
                length: 0,
            },
            splitLine: {
                lineStyle: {
                    color: "#ccc"
                }
            },
            axisLabel: {
                formatter: function (value, index) {
                    return value.toString();
                }
            }
        },
        series: [{
            name: "新增确诊",
            data: num.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
    };
    myChart.setOption(option);
    $(".tendency .map_tab span").eq(0).click(function () {
        var num = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num.length < 27 && i % 3 == 0) {
                num.push(v.all.newAddConfirm);
                date.push(v.date);
            }
        })
        option.series = [{
            name: "新增确诊",
            data: num.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
        option.xAxis.data = date.reverse();
        option.yAxis.max = 120000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value.toString();
        }
        myChart.clear();
        myChart.setOption(option);
    })
    $(".tendency .map_tab span").eq(1).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.confirm);
                num2.push(parseFloat(v.all.confirm) - parseFloat(v.all.heal) - parseFloat(v.all.dead));
                date.push(v.date);
            }
        })

        option.series = [{
            name: "累计确诊",
            data: num1.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#c1021b"
            }
        }, {
            name: "现有确诊",
            data: num2.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ed5b00"
            }
        }]
        option.xAxis.data = date.reverse();
        option.yAxis.max = 3500000;
        option.yAxis.splitNumber = 8;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value.toString();
        }

        myChart.clear();
        myChart.setOption(option);
    })
    $(".tendency .map_tab span").eq(2).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.dead);
                num2.push(v.all.heal);
                date.push(v.date);
            }
        })

        option.series = [{
            name: "死亡数",
            data: num1.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }, {
            name: "治愈数",
            data: num2.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
        option.xAxis.data = date.reverse();
        option.yAxis.max = 1200000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value.toString();
        }

        myChart.clear();
        myChart.setOption(option);
    })
    $(".tendency .map_tab span").eq(3).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(parseFloat(v.all.deadRate));
                num2.push(parseFloat(v.all.healRate));
                date.push(v.date);
            }
        })

        option.series = [{
            name: "病死率",
            data: num1.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }, {
            name: "治愈率",
            data: num2.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
        option.xAxis.data = date.reverse();
        option.yAxis.max = 35;
        option.yAxis.splitNumber = 8;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value + "%";
        }
        myChart.clear();
        myChart.setOption(option);
    })
}
// 昨日新增确诊国家Top10
function top10() {
    var myChart = echarts.init(document.querySelector(".addTop10 .map_info"));
    var countryAddConfirmRankList = foreignData.countryAddConfirmRankList;
    var num = [];
    var nation = [];
    $.each(countryAddConfirmRankList, function (i, v) {
        num.push(v.addConfirm);
        nation.push(v.nation);
    })
    var option = {
        xAxis: {
            type: 'category',
            data: nation,
            axisTick: {
                length: 0,
            },
            axisLabel: {
                interval: 0,
                fontSize: 10,
                rotate: 45,
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 10,
            }
        },
        series: [{
            data: num,
            type: 'bar',
            barWidth: 17,
            itemStyle: {
                emphasis: {
                    color: '#ffe04d'
                }
            }
        }],
    };
    myChart.setOption(option);
};
// 海外多国新增确诊趋势
function importantNation() {
    var myChart = echarts.init(document.querySelector(".importantNation .map_info"));
    var stateData = {};
    var nationName = ["欧洲", "北美洲", "亚洲", "南美洲", "非洲"];
    var continentStatis = foreignData.continentStatis;
    $.each(nationName, function (i1, v1) {
        stateData[v1] = {
            date: [],
            num: []
        };
        $.each(continentStatis, function (i2, v2) {
            stateData[v1].date.push(v2.date);
            stateData[v1].num.push(v2.statis[v1] || 0);
        })
    })

    var option = {
        title: {
            text: "海外新增确诊趋势",
            textStyle: {
                fontSize: 14
            },
            top: 20
        },
        legend: {
            show: true,
            verticalAlign: "middle",
            icon: "rect",
            itemWidth: 12,
            itemHeight: 12,
            right: 20,
            top: 20,
            orient: 'horizontal'
        },
        grid: {
            borderColor: "#ccc"
        },
        xAxis: {
            length: 0,
            type: 'category',
            data: stateData["欧洲"].date,
            axisTick: {
                length: 0,
                rotate: 45
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                color: "#ccc",
                fontSize: 10
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                length: 0,
            },
            splitLine: {
                lineStyle: {
                    color: "#ccc"
                }
            },
            axisLabel: {
                formatter: function (value, index) {
                    return value.toString();
                }
            }
        },
        series: [{
            data: stateData["欧洲"].num,
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
    };

    myChart.setOption(option);
    $(".importantNation .map_tab span").click(function () {
        option.series[0].data = stateData[this.innerText].num;
        myChart.setOption(option);
    })
}
